<template>
  <div class="draggable-container"
       :style="{ 
         top: `${top}px`, 
         left: `${left}px`,
         opacity: isIconMode ? 0 : 1,
         pointerEvents: isIconMode ? 'none' : 'auto'
       }"
       @mousedown="startDrag">
    <!-- 正常显示的组件 -->
    <div class="image-container" @click="handleClick">
      <AiCharacterModel class="draggable-image" ></AiCharacterModel>
    </div>
    
    <!-- 内容区域，点击后显示在上方 -->
    <div v-show="ss.dianji" class="floating-content">
      <sd />
    </div>
  </div>
  
  <!-- 边缘最小化图标 -->
  <div class="edge-icon"
       v-show="isIconMode"
       :style="{
         top: iconTop + 'px',
         left: iconLeft + 'px',
         opacity: isIconMode ? 1 : 0,
         pointerEvents: isIconMode ? 'auto' : 'none'
       }"
       @click="restoreFromIcon">
    <AiCharacterModelMini />
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, nextTick } from 'vue';

import sd from "@/components/ai-chat-box/index.vue";
import AiCharacterModel from './AiCharacterModel.vue';
import AiCharacterModelMini from './AiCharacterModelMini.vue'; // 最小化图标组件

let ss = ref({
  dianji: false,
});

// 组件位置
const top = ref(0);
const left = ref(10); 

// 拖拽状态
const isDragging = ref(false);
const startX = ref(0);
const startY = ref(0);
const initialTop = ref(0);
const initialLeft = ref(0);

// 点击相关标记
const isClick = ref(true);

// 边缘最小化图标状态
const isIconMode = ref(false);
const iconTop = ref(0);
const iconLeft = ref(0);
const edgeThreshold = ref(30); 
const iconSize = ref(60); 
const containerHeight = 120; 

// 初始化位置：设置在左下角，离底部100px
const initPosition = () => {
  // 动态计算初始top值：屏幕高度 - 组件高度 - 底部距离（100px）
  const screenHeight = window.innerHeight;
  top.value = screenHeight - containerHeight - 100;
};

// 开始拖拽
const startDrag = (e) => {
  if (e.target.closest('.floating-content')) return;
  
  isDragging.value = true;
  isClick.value = false;
  startX.value = e.clientX;
  startY.value = e.clientY;
  initialTop.value = top.value;
  initialLeft.value = left.value;
  
  document.body.classList.add('dragging');
  e.preventDefault();
};

// 拖拽中
const handleDrag = (e) => {
  if (!isDragging.value) return;
  
  const offsetX = e.clientX - startX.value;
  const offsetY = e.clientY - startY.value;
  
  // 实时更新位置
  top.value = initialTop.value + offsetY;
  left.value = initialLeft.value + offsetX;
};

// 结束拖拽 
const endDrag = () => {
  if (!isDragging.value) return;
  
  isDragging.value = false;
  document.body.classList.remove('dragging');
  
  const screenWidth = window.innerWidth;
  const screenHeight = window.innerHeight;
  const containerWidth = 150;
  
  let newLeft = left.value;
  let newTop = top.value;
  let edgeSide = null; // 记录吸附的边缘
  
  // 检测左侧边缘
  if (left.value < edgeThreshold.value) {
    newLeft = 0;
    edgeSide = 'left';
  } 
  // 检测右侧边缘
  else if (left.value > screenWidth - containerWidth - edgeThreshold.value) {
    newLeft = screenWidth - containerWidth;
    edgeSide = 'right';
  }
  
  // 检测顶部边缘
  if (top.value < edgeThreshold.value) {
    newTop = 0;
    edgeSide = 'top';
  } 
  // 检测底部边缘
  else if (top.value > screenHeight - containerHeight - edgeThreshold.value) {
    newTop = screenHeight - containerHeight;
    edgeSide = 'bottom';
  }
  
  // 更新位置
  left.value = newLeft;
  top.value = newTop;
  
  // 处理边缘吸附 - 转换为图标模式
  if (edgeSide) {
    isIconMode.value = true;
    
    // 根据吸附边缘计算图标位置
    if (edgeSide === 'left') {
      iconTop.value = top.value + (containerHeight - iconSize.value) / 2;
      iconLeft.value = 5;
    } else if (edgeSide === 'right') {
      iconTop.value = top.value + (containerHeight - iconSize.value) / 2;
      iconLeft.value = screenWidth - iconSize.value - 5;
    } else if (edgeSide === 'top') {
      iconTop.value = 5;
      iconLeft.value = left.value + (containerWidth - iconSize.value) / 2;
    } else if (edgeSide === 'bottom') {
      iconTop.value = screenHeight - iconSize.value - 5;
      iconLeft.value = left.value + (containerWidth - iconSize.value) / 2;
    }
  } else {
    isIconMode.value = false;
  }
  
  setTimeout(() => {
    isClick.value = true;
  }, 150);
};

// 从图标恢复到正常组件
const restoreFromIcon = () => {
  isIconMode.value = false;
  
  const screenWidth = window.innerWidth;
  const screenHeight = window.innerHeight;
  const containerWidth = 150;
  const containerHeight = 120;
  
  if (iconLeft.value < screenWidth / 2) {
    left.value = 100;
  } else {
    left.value = screenWidth - containerWidth - 100;
  }
  
  if (iconTop.value < screenHeight / 2) {
    top.value = 100;
  } else {
    top.value = screenHeight - containerHeight - 100;
  }
};

// 点击事件处理
const handleClick = () => {
  if (isClick.value) {
    ss.value.dianji = !ss.value.dianji;
    
    nextTick(() => {
      const content = document.querySelector('.floating-content');
      if (content) {
        if (ss.value.dianji) {
          content.classList.add('fade-in');
          content.classList.remove('fade-out');
        } else {
          content.classList.add('fade-out');
          content.classList.remove('fade-in');
        }
      }
    });
  }
};

// 初始化位置并监听窗口大小变化
onMounted(() => {
  initPosition(); // 初始化到左下角（离底部100px）
  // 窗口大小变化时重新计算初始位置
  window.addEventListener('resize', initPosition);
  document.addEventListener('mousemove', handleDrag);
  document.addEventListener('mouseup', endDrag);
});

onUnmounted(() => {
  window.removeEventListener('resize', initPosition);
  document.removeEventListener('mousemove', handleDrag);
  document.removeEventListener('mouseup', endDrag);
});
</script>

<style scoped>
.draggable-container {
  position: absolute;
  z-index: 1000;
  user-select: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.image-container {
  width: 140px;
  height: 120px; /* 与script中的containerHeight保持一致 */
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: box-shadow 0.3s ease;
}

.image-container:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.draggable-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.draggable-image:hover {
  transform: scale(1.02);
}

.floating-content {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 0;
  width: 500px;
  transform: translateX(-50px);
  background: white;
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
  padding: 12px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.floating-content.fade-in {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50px) translateY(0);
}

.floating-content.fade-out {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50px) translateY(-10px);
}

body.dragging .draggable-container {
  transition: none;
}

.edge-icon {
  position: absolute;
  z-index: 1001;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transition: opacity 0.3s ease, transform 0.3s ease;
  cursor: pointer;
}

.edge-icon:hover {
  transform: scale(1.05);
}
</style>